<template>
  <a-card>
    <div class='table-operator'>
      <a-button type='primary' icon='plus' @click='edit()'>新建</a-button>
    </div>
    <a-divider />
    <s-table
      ref='table'
      size='default'
      rowKey='id'
      :columns='columns'
      :showPagination='false'
      :data='loadData'
    >
      <span slot='serial' slot-scope='text, record, index'>
        {{ index + 1 }}
      </span>
      <span slot='action' slot-scope='text, record'>
        <template>
          <a-space>
            <a @click='edit(record)'>编辑</a>
            <a @click='authorize(record)'>授权</a>
             <a @click='del(record)'>删除</a>
          </a-space>
        </template>
      </span>
    </s-table>

    <Form ref='formModal' :visible='formVisible' :loading='formLoading' :default-values='formModel' @ok='handleOk'
          @cancel='handleCancel'></Form>

    <Authorize ref='authorizeModal' :visible='authorizeVisible' :loading='authorizeLoading' :role='role' @ok='authorizeVisible = !authorizeVisible'></Authorize>
  </a-card>
</template>

<script>
import { STable } from '@/components'

import Form from './form'

import Authorize from './authorize'

export default {
  name: 'user',
  components: { STable, Form, Authorize },
  data() {
    return {
      formVisible: false,
      formLoading: false,
      formModel: undefined,

      authorizeVisible: false,
      authorizeLoading: false,
      role: undefined,

      // 表头
      columns: [
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '备注',
          dataIndex: 'description'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$api.role().then(res => {
          return res
        })
      }
    }
  },
  activated() {
    this.$refs.table.refresh()
  },
  methods: {
    search() {
      // 刷新表格
      this.$refs.table.refresh()
    },
    resetSearchForm() {

      this.filter = this.$options.data().filter

      // 刷新表格
      this.$refs.table.refresh()
    },

    authorize(record){
      this.role = record
      this.authorizeVisible = true
    },

    edit(record) {
      this.formModel = record
      this.formVisible = true
    },

    handleOk(values) {
      this.formLoading = true
      console.log('values', values)

      let method = 'POST'
      let uri = ''

      if (this.formModel) {
        method = 'PUT'
        uri = `/${this.formModel.name}`
      }

      this.$api.role(uri, values, method).then(res => {
        this.formVisible = false
        this.formLoading = false

        // 刷新表格
        this.$refs.table.refresh()

        this.$message.info('保存成功')
      }).catch(res => {
        this.formLoading = false
      })
    },
    handleCancel() {
      this.formVisible = false
    },
    del(record) {
      this.$confirm({
        title: '是否确认删除?',
        content: record.name,
        onOk: () => {
          this.$api.role(`/${record.name}`, '', 'DELETE').then(res => {
            // 刷新表格
            this.$refs.table.refresh()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>